import 'package:flutter/material.dart';
import 'package:dio/dio.dart';
import 'package:fantuike_app/api/Api.dart' show Api;
import '../../constants.dart' show Constants;
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import 'test.dart';

class ProductDetailPage extends StatefulWidget {
  int productId;

  int productType;

  ProductDetailPage(
      {Key key, @required this.productId, @required this.productType})
      : super(key: key);

  @override
  _ProductDetailPageState createState() => _ProductDetailPageState();
}

class _ProductDetailPageState extends State<ProductDetailPage> {
  String productName = "";
  String insidePicture = "";
  String introduce = "";
  String passRate = "";
  int applyNum = 0;
  static int productId = 0;
  static int productType = 0;

  FlutterWebviewPlugin flutterWebviewPlugin = FlutterWebviewPlugin();
  var urlString =
      "https://www.fanhuishou.com/fantuike/creditcardDetail.html?productId=" +
          productId.toString() +
          "&productType=" +
          productType.toString() +
          "&userId=70";

  @override
  void initState() {
    super.initState();
    getProductDetail(widget.productId, widget.productType);
    flutterWebviewPlugin.onStateChanged.listen((WebViewStateChanged wvs) {
      print(wvs.type);
    });
  }

  launchUrl() {
    setState(() {
      flutterWebviewPlugin.reloadUrl(urlString);
    });
  }

  void getProductDetail(int productId, int productType) {
    _getProductDetail(productId, productType).then((data) {
      setState(() {
        productName = data['extend']['message']['name'];
        insidePicture = data['extend']['message']['secondPicture'];
        introduce = data['extend']['message']['introduce'];
        passRate = data['extend']['message']['passRate'];
        applyNum = data['extend']['message']['applyNum'];
        productId = data['extend']['message']['id'];
        productType = data['extend']['message']['productType'];
      });
    });
  }

  Future _getProductDetail(int productId, int productType) async {
    String url = "";
    if (productType == 0) {
      url = Api.CreditCardDetail;
    } else {
      url = Api.LoanDetail;
    }

    try {
      Response response =
          await Dio().get(url, queryParameters: {"id": productId});
      print(response.data);
      return response.data;
    } catch (e) {
      print(e);
    }
  }

  PreferredSize BuildAppBarWidget() {
    return PreferredSize(
        child: AppBar(
          leading: IconButton(
              icon: Icon(
                Icons.chevron_left,
                size: 30.0,
                color: Color(0xffffffff),
              ),
              onPressed: () {
                Navigator.pop(context);
              }),
          backgroundColor: Color(0xfff26966),
          title: Text(
            productName,
            style: TextStyle(
                color: Color(
                  0xffffffff,
                ),
                fontSize: 18.0),
          ),
          centerTitle: true,
          elevation: 0.0,
        ),
        preferredSize:
            Size.fromHeight(MediaQuery.of(context).size.height * 0.065));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: BuildAppBarWidget(),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            Container(
              alignment: Alignment.center,
              height: 165.0,
              margin: const EdgeInsets.only(top: 10.0, left: 10.0, right: 10.0),
              child: ClipRRect(
                borderRadius: BorderRadius.all(Radius.circular(10.0)),
                child: Image.network(
                  insidePicture,
                  fit: BoxFit.fill,
                ),
              ),
            ),
            Container(
              margin: const EdgeInsets.only(left: 10.0, top: 10.0, right: 10.0),
              alignment: Alignment.centerLeft,
              child: Row(
                children: <Widget>[
                  Text(
                    productName,
                    style: TextStyle(
                        color: Color(0xff4C4C4C),
                        fontSize: 16.0,
                        fontWeight: FontWeight.w500),
                  ),
                  SizedBox(
                    width: 10.0,
                  ),
                  Container(
                    margin: const EdgeInsets.only(top: 4.0),
                    alignment: Alignment.centerLeft,
                    padding: const EdgeInsets.only(left: 1.5, right: 1.5),
                    child: Text(
                      introduce,
                      style:
                          TextStyle(color: Color(0xfff26966), fontSize: 11.0),
                    ),
                    decoration: BoxDecoration(
                        border:
                            Border.all(width: 1.0, color: Color(0xfff26966)),
                        borderRadius: BorderRadius.all(Radius.circular(4.0))),
                  ),
                ],
              ),
            ),
            Container(
              margin: const EdgeInsets.only(
                  left: 10.0, top: 3.0, right: 10.0, bottom: 10.0),
              child: Row(
                children: <Widget>[
                  Text(
                    "通过率: " + passRate,
                    style: TextStyle(color: Color(0xffB6B6B6), fontSize: 12.0),
                  ),
                  SizedBox(width: 5.0),
                  Text(
                    "申请人数: " + applyNum.toString(),
                    style: TextStyle(color: Color(0xffB6B6B6), fontSize: 12.0),
                  )
                ],
              ),
            ),
            Container(
              height: 10.0,
              color: Color(0xffF3F3F3),
            ),
            Container(
              margin: const EdgeInsets.only(left: 10.0, right: 10.0, top: 10.0),
              child: Column(
                children: <Widget>[
                  Container(
                    alignment: Alignment.centerLeft,
                    child: Row(
                      children: <Widget>[
                        Text(
                          "『",
                          style: TextStyle(
                              fontWeight: FontWeight.w500, fontSize: 16.0),
                        ),
                        Text(
                          productName,
                          style: TextStyle(
                              fontWeight: FontWeight.w500, fontSize: 16.0),
                        ),
                        Text(
                          "』",
                          style: TextStyle(
                              fontWeight: FontWeight.w500, fontSize: 16.0),
                        ),
                        SizedBox(
                          width: 4.0,
                        ),
                        Text(
                          "推广工资怎么算?",
                          style: TextStyle(
                              fontWeight: FontWeight.w500, fontSize: 16.0),
                        )
                      ],
                    ),
                  ),
                  Container(
                    margin: const EdgeInsets.only(top: 4.0),
                    alignment: Alignment.centerLeft,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Icon(
                          IconData(
                            0xec1e,
                            fontFamily: Constants.IconFontFamily,
                          ),
                          color: Color(0xff999999),
                        ),
                        Text(
                          "[",
                          style: TextStyle(color: Color(0xff2D2D2D)),
                        ),
                        SizedBox(
                          width: 1.0,
                        ),
                        Text(
                          "会员用户",
                          style: TextStyle(color: Color(0xff2D2D2D)),
                        ),
                        SizedBox(
                          width: 1.0,
                        ),
                        Text(
                          "]",
                          style: TextStyle(color: Color(0xff2D2D2D)),
                        ),
                        SizedBox(
                          width: 4.0,
                        ),
                        Expanded(
//                            alignment: Alignment.topLeft,
                            child: Container(
                          alignment: Alignment.centerLeft,
                          child: Text(
                            "按照推荐1人首次核卡返工资80元进行计算",
                            softWrap: true,
                            maxLines: 2,
                            overflow: TextOverflow.ellipsis,
                          ),
                        ))
                      ],
                    ),
                  ),
                  Container(
                    margin: const EdgeInsets.only(top: 4.0),
                    alignment: Alignment.centerLeft,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Icon(
                          IconData(
                            0xec1e,
                            fontFamily: Constants.IconFontFamily,
                          ),
                          color: Color(0xff999999),
                        ),
                        Text(
                          "[",
                          style: TextStyle(color: Color(0xff999999)),
                        ),
                        SizedBox(
                          width: 1.0,
                        ),
                        Text(
                          "普通用户",
                          style: TextStyle(color: Color(0xff999999)),
                        ),
                        SizedBox(
                          width: 1.0,
                        ),
                        Text(
                          "]",
                          style: TextStyle(color: Color(0xff999999)),
                        ),
                        SizedBox(
                          width: 4.0,
                        ),
                        Expanded(
//                            alignment: Alignment.topLeft,
                            child: Container(
                          alignment: Alignment.centerLeft,
                          child: Text(
                            "按照推荐1人首次核卡返工资30元进行计算",
                            softWrap: true,
                            maxLines: 2,
                            overflow: TextOverflow.ellipsis,
                            style: TextStyle(color: Color(0xff999999)),
                          ),
                        ))
                      ],
                    ),
                  ),
                  Container(
//                    margin: const EdgeInsets.only(top: 4.0),
                    alignment: Alignment.centerLeft,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Icon(
                          IconData(
                            0xec1e,
                            fontFamily: Constants.IconFontFamily,
                          ),
                          color: Color(0xff999999),
                        ),
                        Text(
                          "【示例】",
                          style: TextStyle(color: Color(0xff999999)),
                        )
                      ],
                    ),
                  ),
                  Container(
//                    margin: const EdgeInsets.only(top: 4.0),
                    alignment: Alignment.centerLeft,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Icon(
                          IconData(
                            0xec1e,
                            fontFamily: Constants.IconFontFamily,
                          ),
                          color: Color(0xff999999),
                        ),
                        Expanded(
                            child: Text(
                          "假设1月您共成功邀请100人申请" + productName + "并首次核卡成功",
                          style: TextStyle(color: Color(0xff999999)),
                          maxLines: 4,
                          softWrap: true,
                          overflow: TextOverflow.ellipsis,
                        ))
                      ],
                    ),
                  ),
                  Container(
                    margin: const EdgeInsets.only(top: 4.0),
                    alignment: Alignment.centerLeft,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Icon(
                          IconData(
                            0xec1e,
                            fontFamily: Constants.IconFontFamily,
                          ),
                          color: Color(0xff999999),
                        ),
                        Expanded(
                            child: Text(
                          "若您为会员用户",
                          style: TextStyle(color: Color(0xff999999)),
                          maxLines: 4,
                          softWrap: true,
                          overflow: TextOverflow.ellipsis,
                        ))
                      ],
                    ),
                  ),
                  Container(
                    margin: const EdgeInsets.only(top: 4.0),
                    alignment: Alignment.centerLeft,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Icon(
                          IconData(
                            0xec1e,
                            fontFamily: Constants.IconFontFamily,
                          ),
                          color: Color(0xff999999),
                        ),
                        Expanded(
                            child: Text(
                          "您1月工资=80元×100=8000元",
                          style: TextStyle(color: Color(0xff999999)),
                          maxLines: 4,
                          softWrap: true,
                          overflow: TextOverflow.ellipsis,
                        ))
                      ],
                    ),
                  ),
                  Container(
                    margin: const EdgeInsets.only(top: 4.0),
                    alignment: Alignment.centerLeft,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Icon(
                          IconData(
                            0xec1e,
                            fontFamily: Constants.IconFontFamily,
                          ),
                          color: Color(0xff999999),
                        ),
                        Expanded(
                            child: Text(
                          "若您为普通用户",
                          style: TextStyle(color: Color(0xff999999)),
                          maxLines: 4,
                          softWrap: true,
                          overflow: TextOverflow.ellipsis,
                        ))
                      ],
                    ),
                  ),
                  Container(
                    margin: const EdgeInsets.only(top: 4.0),
                    alignment: Alignment.centerLeft,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Icon(
                          IconData(
                            0xec1e,
                            fontFamily: Constants.IconFontFamily,
                          ),
                          color: Color(0xff999999),
                        ),
                        Expanded(
                            child: Text(
                          "您1月工资=30元×100=3000元",
                          style: TextStyle(color: Color(0xff999999)),
                          maxLines: 4,
                          softWrap: true,
                          overflow: TextOverflow.ellipsis,
                        ))
                      ],
                    ),
                  ),
                ],
              ),
            ),
            Container(
              height: 10.0,
              color: Color(0xffF3F3F3),
            ),
            Container(
              margin: const EdgeInsets.only(
                  left: 10.0, right: 10.0, top: 10.0, bottom: 30.0),
              child: Column(
                children: <Widget>[
                  Container(
                    alignment: Alignment.centerLeft,
                    child: Row(
                      children: <Widget>[
                        Text(
                          "『",
                          style: TextStyle(
                              fontWeight: FontWeight.w500, fontSize: 16.0),
                        ),
                        Text(
                          productName,
                          style: TextStyle(
                              fontWeight: FontWeight.w500, fontSize: 16.0),
                        ),
                        Text(
                          "』",
                          style: TextStyle(
                              fontWeight: FontWeight.w500, fontSize: 16.0),
                        ),
                        SizedBox(
                          width: 4.0,
                        ),
                        Text(
                          "工资结算说明",
                          style: TextStyle(
                              fontWeight: FontWeight.w500, fontSize: 16.0),
                        )
                      ],
                    ),
                  ),
                  Container(
                    margin: const EdgeInsets.only(top: 4.0),
                    alignment: Alignment.centerLeft,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Icon(
                          IconData(
                            0xec1e,
                            fontFamily: Constants.IconFontFamily,
                          ),
                          color: Color(0xff999999),
                        ),
                        Text(
                          "结算标准",
                          style: TextStyle(color: Color(0xff2D2D2D)),
                        ),
                      ],
                    ),
                  ),
                  Container(
                    margin: const EdgeInsets.only(left: 25.0),
                    alignment: Alignment.centerLeft,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text(
                          "首次核卡符合结算标准",
                          style: TextStyle(color: Color(0xff999999)),
                        ),
                      ],
                    ),
                  ),
                  Container(
                    margin: const EdgeInsets.only(top: 4.0),
                    alignment: Alignment.centerLeft,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Icon(
                          IconData(
                            0xec1e,
                            fontFamily: Constants.IconFontFamily,
                          ),
                          color: Color(0xff999999),
                        ),
                        Text(
                          "结算时间 (主动查进度可实时结算工资)",
                        )
                      ],
                    ),
                  ),
                  Container(
                    margin: const EdgeInsets.only(left: 25.0),
                    alignment: Alignment.centerLeft,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text(
                          '每周五结算"上周一至周日"的工资。',
                          style: TextStyle(color: Color(0xff999999)),
                        ),
                      ],
                    ),
                  ),
                  Container(
                    margin: const EdgeInsets.only(left: 25.0),
                    alignment: Alignment.centerLeft,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text(
                          '*在客户列表里【查询进度】可"实时"结算工资,',
                          style: TextStyle(color: Color(0xff999999)),
                        ),
                      ],
                    ),
                  ),
                  Container(
                    margin: const EdgeInsets.only(left: 25.0),
                    alignment: Alignment.centerLeft,
                    child: Center(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text(
                            '若不主动查询则按照以上结算时间进行。',
                            style: TextStyle(color: Color(0xff999999)),
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
      bottomNavigationBar: Container(
        height: 44.0,
        child: Row(
          children: <Widget>[
            Expanded(
                child: Container(
              child: Container(
                child: GestureDetector(
                  child: Container(
                    color: Color(0xff333333),
                    alignment: Alignment.center,
                    child: Text(
                      "我要办卡",
                      style:
                          TextStyle(color: Color(0xffffffff), fontSize: 16.0),
                    ),
                  ),
                  onTap: () {
                    print("我要办卡");
                    Navigator.of(context).push(new MaterialPageRoute(
                        builder: (context) => WebViewExample()));

//                launchUrl();
                  },
                ),
              ),
            )),
            Expanded(
                child: GestureDetector(
              child: Container(
                alignment: Alignment.center,
                color: Color(0xfff26966),
                child: Text(
                  "立即推广",
                  style: TextStyle(color: Color(0xffffffff), fontSize: 16.0),
                ),
              ),
              onTap: () {
                print("立即推广");
              },
            )),
          ],
        ),
      ),
    );
  }
}
